/* *
*观察者模式是一种行为型设计模式，它定义了一种一对多的依赖关系，使得多个观察者对象可以同时监听某一个主题对象，当主题对象发生变化时，它会自动通知所有的观察者对象，从而使它们能够及时进行响应。
*在前端开发中，观察者模式被广泛应用于实现各种事件机制。在观察者模式中，有三个主要角色：
*主题（Subject）：负责维护一个观察者列表，以及提供用于添加、删除和通知观察者的方法。
*观察者（Observer）：定义了一个更新接口，用于在主题状态发生变化时被调用。每个观察者对象都必须实现这个更新接口。
*具体观察者（Concrete Observer）：实现了观察者接口，保存了一个对主题对象的引用，可以在主题状态发生变化时更新自身状态。
* */
//? 主题Subject：负责维护一个观察者列表，以及提供用于添加、删除和通知观察者的方法
class Subject {
    constructor() {
        //? 观察者列表
        this.observers = [];
    }

    //? 添加观察者
    addObserver(observer) {
        this.observers.push(observer);
    }

    //? 移除观察者
    removeObserver(observer) {
        const index = this.observers.indexOf(observer);
        if (index > -1) {
            this.observers.splice(index, 1);
        }
    }

    //? 通知观察者
    notify(data) {
        this.observers.forEach((observer) => {
            //? 观察者更新
            observer.update(data);
        });
    }
}

class Observer {
    update(data) {
        console.log(`Received data: ${data}`);
    }
}

//? 测试代码
const subject = new Subject();
//? 新建两个观察者
const observer1 = new Observer();
const observer2 = new Observer();
//? 两个观察者观察一个subject
subject.addObserver(observer1);
subject.addObserver(observer2);
//? subject变化了 通知所有观察者
subject.notify('Hello world!'); // Output: Received data: Hello world!
//? observer1不准看了
subject.removeObserver(observer1);
//? 这里只有observer2观察了
subject.notify('Goodbye world!'); // Output: Received data: Goodbye world!

